<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <style>



        * {
            color: white;
            height: 100px;
            margin: 0;padding: 0;
        }

        header {
            background-color: blue;
        }

        .main {
            padding: 0 100px;
            overflow: auto;
            height: auto;
        }

        .left,
        .center,
        .right {
            float: left;
        }

        .center {
            background-color: purple;
            width: 100%;
            /* 这会把left和right挤到下一行 */
        }

        .left {
            background-color: red;
            width: 100px;
            margin-left: -100%;
            position: relative;
            left: -100px;
        }

        .right {
            background-color: grey;
            width: 100px;
            margin-left: -100px;
            position: relative;
            left: 100px;
        }

        footer {
            background-color: black;
        }

        /* 清除浮动 */
        .clear-fix::after {
            content: "";
            display: block;
            clear: both;
        }
    </style>

    <header><h1>圣杯布局  -     必知必会</h1></header>

    <div class="main clear-fix">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

    <footer class="bottom">bottom</footer>


    <p style="clear: both;   "></p>



    <xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">
        
        必知必会 

        <div class="main clear-fix">
            <div class="center">center</div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
    
        <footer class="bottom">bottom</footer>

        解析:
        .main {
            padding: 0 100px;   => 在父容器 使用 padding 实现左右留白 100 px
            overflow: auto;
            height: auto;
        }

        .center {
            background-color: purple;
            width: 100%;                   => center 设置为 100% 宽度,  这会把 left 和 right 挤到下一行
        }

        .left {
            background-color: red;
            width: 100px;
            margin-left: -100%;         => 向左移动 100%   (父容器的 100%)
            position: relative;
            left: -100px;        => 向左移动 100 px   (自身宽度的 100 px)
        }

        .right {
            background-color: grey;
            width: 100px;
            margin-left: -100px;        => 向左移动 100 px (自身宽度的 100 px)
            position: relative;
            left: 100px;           => 向右移动 100 px
        }

        
    </xmp>
   

</body>

</html>